<template>
  <div
    class="article-warpper"
    :class="{ 'noCatalog': !hasCatalog }"
  >
    <v-loading
      type="ring"
      v-show="loading"
    ></v-loading>
    <article
      class="article"
      v-show="!loading"
    >
      <header>
        <h1 class="title">{{ article.title }}</h1>
        <ul class="tags">
          <i class="iconfont icon-tag1"></i>
          <li v-for="tag in article.tags">{{ tag.name }}</li>
        </ul>
      </header>
      <p
        v-html="parser(article.content || '')"
        class="markdown"
        ref="articleContent"
      ></p>
      <footer>
        <p>发表于 <span class="createTime">{{ article.createTime }}</span> ,最后修改于 <span class="lastEditTime">{{ article.lastEditTime }}</span></p>
      </footer>
    </article>
    <aside
      class="catalog"
      v-if="hasCatalog"
      v-show="!loading"
    >
      <h3
        class="catalog-title"
        @click="scrollToTop"
        title="返回顶部"
      >文章目录<i class="iconfont icon-top"></i></h3>
      <div class="catalog-wrapper">
        <ul class="catalog-list">
          <li
            v-for="item in catalog"
            :class="item.tagName"
            class="catalog-li"
          ><a
              href="javascript:;"
              @click="scrollTo(item.href)"
            >{{ item.text }}</a></li>
        </ul>
      </div>
    </aside>
  </div>
</template>

<script>
import api from '../../api'
import marked from '../../assets/js/marked'
import Loading from 'components/Loading/Loading'
//滚动组件
import VueScrollTo from 'Vue-scrollto'

export default {
  data() {
    return {
      article: {},
      catalog: [],
      hasCatalog: false, //这个变量有来判断该文章有没有目录
      loading: true
    }
  },
  watch: {
    $route(to, from) {
      let path = from.path
      if (path === '/articles' || path === '/tags' || path === '/archives') {
        if (to.params.id) {
          this.loading = true
          this.catalog = []
          this.article = {}
          api
            .getArticleById(to.params.id)
            .then(res => {
              if (res.data.code === 200) {
                this.loading = false
                this.article = res.data.data
                this.$nextTick(() => {
                  this.createCatalog()
                })
              }
            })
            .catch(err => {
              this.$router.push({
                path: '/articles'
              })
            })
        }
      }
    }
  },
  created() {
    api
      .getArticleById(this.$route.params.id)
      .then(res => {
        if (res.data.code === 200) {
          this.loading = false
          this.article = res.data.data
          this.$nextTick(() => {
            this.createCatalog()
          })
        }
      })
      .catch(err => {
        this.$router.push({
          path: '/articles'
        })
      })
  },
  methods: {
    parser(value) {
      return marked(value)
    },
    //生成目录
    createCatalog() {
      let nodeList = this.$refs['articleContent'].querySelectorAll(
        'h1, h2, h3, h4, h5, h6'
      )
      if (nodeList.length === 0) {
        this.hasCatalog = false
        return
      }
      this.hasCatalog = true
      Array.from(
        this.$refs['articleContent'].querySelectorAll('h1, h2, h3, h4, h5, h6')
      ).forEach((item, i) => {
        item.id = item.localName + '-' + i //给标签设置id
        this.catalog.push({
          tagName: item.localName,
          text: item.innerText,
          href: item.localName + '-' + i //href为上面所设置的id
        })
      })
    },
    //滚动到指定标题
    scrollTo(id) {
      let obj = document.getElementById(id)
      VueScrollTo.scrollTo(obj, {
        onDone: function() {
          obj.style.transform = 'scale(1.2)'
          obj.style.webkitTransform = 'scale(1.2)'
          obj.style.transition = 'all .5s'
          obj.style.webkitTransition = 'all .5s'
          obj.addEventListener('transitionend', function() {
            this.style = ''
          })
        }
      })
    },
    //返回顶部
    scrollToTop() {
      VueScrollTo.scrollTo('#app')
    }
  },
  components: {
    'v-loading': Loading
  }
}
</script>

<style lang="stylus" scoped>
@import '../../assets/stylus/_setting.styl'
.article-warpper
  .article
    margin-right 230px
    margin-bottom 30px
    header
      .title
        font-size 2em
        margin-bottom 0.8em
        word-wrap break-word
        white-space pre-wrap
      ul.tags
        font-size 0
        margin-bottom 20px
        i.icon-tag1
          color #333
          font-size 16px
        li
          display inline-block
          font-size 14px
          padding 0 8px
    footer
      margin-top 30px
      .createTime, .lastEditTime
        font-style italic
        font-size 14px
        border-bottom 1px dashed $green
  .catalog
    box-shadow 0px 1px 1px #7D7D7D
    position fixed
    width 225px
    top 110px
    left 50%
    margin-left 270px
    .catalog-title
      cursor pointer
      font-size 18px
      text-align center
      padding 5px 0
      border-bottom 1px dashed #ddd
    .catalog-wrapper
      padding 5px 6px
      max-height 400px
      padding-left 20px
      overflow-y auto
      ul.catalog-list
        font-size 14px
        color #bfbfbf
        .catalog-li
          a
            color #333
            &:hover
              color $green
        li.h1
          margin-left 0
          list-style-type disc
        li.h2
          margin-left 0.7em
          list-style-type circle
        li.h3
          margin-left 1.4em
          list-style-type square
        li.h4
          margin-left 2.1em
          list-style-type disc
        li.h5
          margin-left 2.8em
          list-style-type circle
        li.h6
          margin-left 3.5em
          list-style-type square
.noCatalog
  max-width 750px
  margin 0 auto
  .article
    margin-right 0
@media screen and (max-width 950px)
  .article-warpper
    .article
      margin-right 210px
    .catalog
      margin-left 250px
@media screen and (max-width 876px)
  .article-warpper
    .article
      margin-right 180x
    .catalog
      margin-left 210px
@media screen and (max-width 768px)
  .article-warpper
    .article
      margin-right 0
    .catalog
      display none
</style>